<!--
 * @Author: dfh
 * @Date: 2024-03-15 10:32:20
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="card t-j">
        <text class="title">实时汇率</text>
        <view class="content-wrap">
            <view style="flex:1">
                <picker-nation :title="data.currencySlaveCh" :num="1" :tip="data.currencySlaveEn" :rateList="rateList"
                    @changeHandle="changeHandle" type="start"></picker-nation>
            </view>
            <image :src="$filters.formatImage('icon_exchange.png')" class="icon" @click="switchHandle"/>
            <view style="flex:1">
                <picker-nation :title="data.currencyMaseterCh" :num="data.exchangeRate" :tip="data.currencyMasterEn"
                    :rateList="rateList" @changeHandle="changeHandle" type="end"></picker-nation>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import PickerNation from './picker-nation.vue'

defineProps({
    data: {
        type: Object,
        default: () => { }
    },
    rateList: {
        type: Array,
        default: () => []
    }
})

const emites = defineEmits(['onSelectHandle','switchHandle'])

const currentIdx = ref(0);

const changeHandle = (obj) => {
    emites('onSelectHandle', obj)
}

const switchHandle=()=>{
    emites('switchHandle')
}
</script>

<style lang="scss" scoped>
.card {
    margin-left: calc(calc(100% - 710rpx) / 2);
    width: 710rpx;
    border-radius: 20rpx;
    background-color: white;
    padding: 30rpx;
    overflow: hidden;
    box-sizing: border-box;
}

.t-j {
    position: relative;
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
    background: to right top,#eef1fd,#e7ebfc,#b9bcca;
    .title {
        position: absolute;
        top: 0;
        left: 30rpx;
        width: 100rpx;
        text-align: center;
        padding: 10rpx;
        background: #ffe2cb;
        font-size: 20rpx;
        color: #e6b088;
    }

    .content-wrap {
        margin-top: 34rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        .icon {
            width: 40rpx;
            height: 40rpx;
        }

        .c-b {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;

            .s_title {
                font-size: 26rpx;
                color: rgba(49, 47, 47, 0.6);
            }

            .num {
                margin: 16rpx 0 8rpx;
                font-size: 38rpx;
                color: rgb(238, 81, 67);
                font-weight: 700;
            }

            .tip {
                font-size: 24rpx;
                color: rgb(190, 192, 195);
            }
        }
    }
}
</style>